﻿<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
	<!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Distance Detector</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width">
		
	<style>		
		@font-face {
			font-family: DigitsBoldItalic;
			src: url(/fonts/DS-DIGIT.TTF);		
		}
		
		.digits {
			font-family: DigitsBoldItalic;
			font-size: 62pt;
			text-align: right;
		}
	</style>		

		<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

		<link rel="stylesheet" href="css/normalize.css">
		<link rel="stylesheet" href="css/main.css">
		
		<script src="js/vendor/modernizr-2.6.2.min.js"></script>
		<!-- 使用 jQuery + jQuery Mobile + Codiqa Lib... -->
		<link rel="stylesheet"  href="http://codiqa.com/static/js/offline/jquerymobile/1.2.0/jquery.mobile-1.2.0.css" />
		<link rel="stylesheet" class="ext"  href="http://codiqa.com/static/style/target.css?1354834570" />
		<link rel="stylesheet" class="ext"  href="http://codiqa.com/static/style/my.css?1354640146 />
		<link rel="stylesheet" href="http://codiqa.com/icons/css" media="screen" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="http://codiqa.com/static/js/offline/jquery-ui-mobilecustom.js"></script>
		<script type="text/javascript" src="http://codiqa.com/static/js/offline/jquerymobile/1.2.0/jquery.mobile-1.2.0.js"></script>
		
		</head>

		<script type="text/javascript">
			var socket;
			if (window["WebSocket"]) {
		    	var host = window.location.hostname;								// retrieve the host name same as the browser uri
		    	var port = window.location.port;									// retreive the port number default 80
				socket = new WebSocket("ws://" + host + ":" + port + "/distance");	// create and connect to WebSocket server with service name='/distance'
				socket.onmessage = function(evt) {									// onMessage Event
					var msg = JSON.parse(evt.data);									// parse the message by JSON
					$('#id-result').text( (msg.result/10).toFixed(1) + " CM");		// display the result to object (power by jQuery)
				}
		
				function trigger() {
					socket.send("t");	// send simple trigger command
				}
		
				function automatic() {
					socket.send("a");	// send simple automatic command
				}
			}
		</script>

		<body>
		<!--[if lt IE 7]>
		<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
		<![endif]-->

		<!-- Add your site or application content here -->

		<!-- Home -->
		<div data-role="page" id="page1">
			<div data-theme="a" data-role="header">
				<h3 id="usm-title">Distance</h3>
			</div>
			<div data-role="content">
				<div class="digits" id="id-result">
					Result...
				</div>
				<!-- Buttons -->
				<a data-role="button" data-transition="slideup" data-theme="a" href="#page1" data-icon="arrow-u" data-iconpos="left" id="id-trigger" onclick="trigger()"> Trigger </a>
				<a data-role="button" data-transition="slideup" data-theme="a" href="#page1" data-icon="forward" data-iconpos="left" id="id-auto"  onclick="automatic()"> Automatic </a>
			</div>
		</div>
		</body>
</html>
